<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>发送</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-form ref="form_data" :model="form_data">
                <el-form-item label="发送模式" prop="send_type"
                              :rules="[{required: true, message: '请选择发送模式', trigger: 'blur'}]">
                    <el-select v-model="form_data.send_type" @change="select_change">
                        <el-option label="立即发送" value="send_now"></el-option>
                        <el-option label="定时发送" value="send_delay"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发送时间" v-if="is_send_delay" prop="send_date"
                              :rules="[{required: true, message: '请选择发送时间', trigger: 'blur'}]">
                    <el-date-picker v-model="form_data.send_date" type="datetime" placeholder="选择时间" align="right"
                                    :picker-options="picker_options"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button style="float: right;" type="primary" @click="submit('form_data')">确定</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msgid: {$msgid},
            is_send_delay: false,
            picker_options: {
                shortcuts: [{
                    text: '今晚7点',
                    onClick(picker) {
                        const date = new Date(new Date().setHours(0, 0, 0, 0));
                        date.setTime(date.getTime() + 3600 * 1000 * 19);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '今晚7点半',
                    onClick(picker) {
                        const date = new Date(new Date().setHours(0, 0, 0, 0));
                        date.setTime(date.getTime() + 3600 * 1000 * 19.5);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '今晚8点',
                    onClick(picker) {
                        const date = new Date(new Date().setHours(0, 0, 0, 0));
                        date.setTime(date.getTime() + 3600 * 1000 * 20);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '今晚8点半',
                    onClick(picker) {
                        const date = new Date(new Date().setHours(0, 0, 0, 0));
                        date.setTime(date.getTime() + 3600 * 1000 * 20.5);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '今晚9点',
                    onClick(picker) {
                        const date = new Date(new Date().setHours(0, 0, 0, 0));
                        date.setTime(date.getTime() + 3600 * 1000 * 21);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '今晚9点半',
                    onClick(picker) {
                        const date = new Date(new Date().setHours(0, 0, 0, 0));
                        date.setTime(date.getTime() + 3600 * 1000 * 21.5);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '今晚10点',
                    onClick(picker) {
                        const date = new Date(new Date().setHours(0, 0, 0, 0));
                        date.setTime(date.getTime() + 3600 * 1000 * 22);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '今晚10点半',
                    onClick(picker) {
                        const date = new Date(new Date().setHours(0, 0, 0, 0));
                        date.setTime(date.getTime() + 3600 * 1000 * 22.5);
                        picker.$emit('pick', date);
                    }
                }]
            },
            form_data: {
                send_type: 'send_now',
                send_date: '',
            },
        },
        methods: {
            // 监听select改变
            select_change(val) {
                if (val == 'send_delay') {
                    this.is_send_delay = true;
                } else {
                    this.is_send_delay = false;
                }
            },
            // 提交表单
            submit(form_data) {
                var that = this;
                that.$refs[form_data].validate((valid) => {
                    if (valid) {
                        that.$confirm('确定发送此任务?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            var _send_date = new Date(that.form_data.send_date);
                            _send_date = (_send_date.getTime()) / 1000;
                            var loading = '';
                            $.ajax({
                                type: 'post',
                                cache: false,
                                url: '{:url("/wechat/customer.cusmsg/send_schedule")}',
                                data: {id: that.msgid, send_type: that.form_data.send_type, send_date: _send_date},
                                beforeSend: function () {
                                    // loading
                                    loading = that.$loading({
                                        lock: true,
                                        text: 'Loading',
                                        spinner: 'el-icon-loading',
                                        background: 'rgba(0, 0, 0, 0.7)'
                                    });
                                },
                                success: function (res) {
                                    if (res.msg == 'ok') {
                                        that.$message({
                                            type: 'success',
                                            message: '操作成功!'
                                        });
                                    } else {
                                        that.$message.error('操作失败');
                                    }
                                },
                                error: function () {
                                    that.$message.error('发生系统错误,请与管理员联系！');
                                },
                                complete: function () {
                                    loading.close();
                                }
                            });
                        });
                    }
                });
            },
        }
    })
</script>
</html>